<template>
  <div class="page_wrap">
      <a-breadcrumb>
        <a-breadcrumb-item>Home</ a-breadcrumb-item>
        <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
        <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
        <a-breadcrumb-item>An Application</a-breadcrumb-item>
      </a-breadcrumb>
      <my-dia :open="open" title="添加管理员"
      width="50%" @sendOk="toAdd"
      @sendClose="toClose">
         <a-form
            ref="myform"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            layout="horizontal"
            style="max-width: 600px"
            :model="formState"
          >
            <a-form-item label="用户名"
                name="userName"
                :rules="[{ required: true, message: '输入用户名' ,trigger:'blur'}]">
              <a-input v-model:value="formState.userName" />
            </a-form-item>
             <a-form-item label="姓名"
             name="turename"
             :rules="[{ required: true, message: '姓名必填' ,trigger:'blur'}]">
              <a-input v-model:value="formState.turename" />
            </a-form-item>
             <a-form-item label="手机号"
             name="phone"
             :rules="[{ pattern:/^1[3|5|6|8|7|9]\d{9}$/, message: '手机号错误' ,trigger:'blur'}]">
              <a-input  v-model:value="formState.phone"  />
            </a-form-item>
            <a-form-item label="权限选择"
             name="power"
             :rules="[{ required: true, message: '必选权限',trigger:'blur' }]">
              <a-select v-model:value="formState.power">
                <a-select-option value="1">系统管理员</a-select-option>
                <a-select-option value="2">课程管理员</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="树形选择">
              <!-- 树形组件 -->
              <a-tree-select :tree-data="treeData" />
            </a-form-item>
            <a-form-item label="级联选择器">
              <!-- 级联选择器 -->
              <a-cascader :options="options" />
            </a-form-item>
            
          </a-form>
            
    </my-dia>
    <!-- 表格组件 -->
     <div class="search_wrap">
       <div>
          <a-input v-model:value="searchText"></a-input>
          <a-button type="primary" @click="toSearch">查询</a-button>
        </div>
        <a-button danger @click="toOpen">添加</a-button>
     </div>
     <!-- antd的表格 -->
       <a-table :columns="columns" :data-source="data"
        :pagination="pagination"
         @change="handleTableChange"
       >
            <!-- 关于列标题自定义内容 -->
              <template #headerCell="{ column }">
                  <template v-if="column.key==='power'">
                     <SmileOutlined />权限名
                  </template>
              </template>

             <!-- 关于表格体内部的单元自定义内容 -->
            <template #bodyCell="{ column, record }">
                  <!-- 权限 column 表头数据 
                   record  当前行数据-->
                 <template v-if="column.key==='power'">
                      {{record.power=='1'?'超级管理员':'课程管理员'}}
                  </template>
                  <template v-if="column.key==='createAt'"">
                      {{new Date(record.createAt).toLocaleString()}}
                  </template>
                   <template v-if="column.key==='action'"">
                      <a-button type="primary" @click="Edit(record)">编辑</a-button>
                       <a-button danger @click="toDel(record)">删除</a-button>
                  </template>

            </template>

       </a-table>
       
  </div>
</template>
<script setup lang="ts">
import myDia from './myDia.vue'

  import {ref,reactive, toRefs,computed,watch} from 'vue'  
  // 从 ui组件库中导出 写好的ts的type类型
  import type { TreeSelectProps, CascaderProps } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';

    import {getAdminListApi,toDelApi} from '../api/admin.js'
    import {addHook} from './addHook.js'
    import { message } from 'ant-design-vue';

      // antd 最早是配置react的组件库
      // antdesign -vue  antd-vue 
      // ui组件库 使用于pc端

  //  弹出层开关
    let open=ref<boolean>(false);
    // 表单label样式
    const labelCol = { style: { width: '150px' } };   const wrapperCol = { span: 14 };

// 树形需要的数据
    const treeData = reactive<TreeSelectProps['treeData']>(
      [
        { title: 'Light', value: 'light', 
          children: [
            { title: 'Bamboo', value: 'bamboo',
              children:[{
                title: '你好', value: '你好'
                },
                {
                  title: '汽车', value: '汽车'
                }
              ]
             }
          ] 
        },
     ]
  );
  const options = reactive<CascaderProps['options']>([
      {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
          {
            value: 'hangzhou',
            label: 'Hangzhou',
            children:[{
               value: 'yuhang',
              label: '余杭区'
            } 
           ]
          },
        ],
      },
    ]);

    // 弹出层 自带的 确定按钮触发事件
    let toAdd=()=>{
      console.log("触发了")
      // 添加管理员方法
      let adminflag =toAddAdmin(); //添加管理员
        if(adminflag){ 
            getList(); //添加成功 调用列表
            open.value=false; //添加成功   
      }
    }
    
    let toClose=()=>{
         open.value=false;
    }
    // 点击添加 
    let toOpen=()=>{
      console.log(open.value)
      open.value=true;
    }
    // 关于表格-----------------------------------
    // columns 表格每一列的数据
    let columns=[{
        title:"用户名",
        dataIndex: 'userName',
        key: 'userName',
    },
    {
        title:"姓名",
       name: '姓名',
        dataIndex: 'turename',
        key: 'turename',
    },
     {
       title: '后台权限',
        dataIndex: 'power',
        key: 'power',
    },
    {
         title: '注册日期',
        dataIndex: 'createAt',
        key: 'createAt',
    },
      {
         title: '操作',
        dataIndex: 'action',
        key: 'action',
    }]

    let data=ref([])
    let searchText=ref(''); //搜索条件
    let pageStart=ref(1);
    let state=reactive({
      total:0,
      pageSize:3
    })
    // 获取管理员列表接口
    let getList=async ()=>{
      let res:any=await getAdminListApi({
          searchText:searchText.value,
          pageStart:pageStart.value
      })
         console.log(res)
        //  存储数据
       data.value=res.data.list
       state.pageSize=res.data.pageSize;
       state.total=res.data.count;
    }
    let {total,pageSize}=toRefs(state)
    console.log(total,pageSize)
    getList();

    // 添加逻辑和编辑逻辑的hook函数  分割出去的逻辑
     let {formState,toAddAdmin,toEdit}=addHook();
    let Edit=(item:any)=>{
        toEdit(item)//回显方法
        open.value=true;
    }
    // watch监听遮罩层关闭 、如果关闭清空表单
    let myform=ref() //获取到的表单组件
    watch(open,(newVal)=>{
        console.log(newVal,"7777777777777")
        if(!newVal){
          // 重置表单
           myform.value.resetFields();
        }
    })

    // 删除操作
    let toDel=async (record:any)=>{
        console.log(record,"99999999999999")
        let res=await toDelApi(record.tokenId)
        console.log(res)
        message.success("删除成功")
        getList();

    }
    // 查询  搜索
    let toSearch=()=>{
      getList();
      searchText.value=""
    }

      // 分页需要的计算属性
    const pagination = computed(() => ({
        total: total.value, //总条数
        current: pageStart.value,//当前页码
        pageSize: pageSize.value,//每页条数
      }));
    // table自带change事件
    let handleTableChange=(pag:any)=>{
        console.log(pag)
        pageStart.value=pag.current; //pag.current 当前页码
          getList();
    }
</script>
<style >
  .page_wrap{
    width:100vw;
    padding:50px;
    box-sizing:border-box;
  }
  .search_wrap{
    width:100%;
    display:flex;
    margin-top:20px;
    justify-content:space-between;
    >div{
       display:flex;
    }
  }
</style>